<template>
  <div class="index">
    <!-- 头 -->
    <div class="laoda">
      <mt-header class="d1" title="用户中心">
        <router-link to="/" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
      <div class="m-t">
        <!-- 登录部分 -->
        <div class="topbox">
          <div class="box" v-if="isLogin">
            <img class="img" src="/img/index/01.png" width="80px" />
            <router-link to="/login"
              ><span class="span">点击登录</span></router-link
            >
            <span class="span1" v-show="ying">登录后更精彩</span>
          </div>
          <div class="box" v-else>
            <img class="img" src="/img/index/01.png" width="80px" />
            <span class="span">{{ username }}</span>
            <span class="span1" @click="logout">注销</span>
          </div>

          <div class="package">
            <!-- <div> -->
            <div class="package-item1"></div>
            <div class="q">
              <span @click="goto">钱包</span>
              <p style="color: rgb(129, 118, 118); font-size: 15px" v-show="ying">
                登录后可查看
              </p>
            </div>
            <!-- </div> -->

            <div class="package-item2"></div>
            <div>
              <span class="w" @click="go">券包</span>
              <p
                style="
                  color: rgb(129, 118, 118);
                  font-size: 15px;
                  position: absolute;
                  top: 96px;
                  left: 150px;
                "
              v-show="ying">
                登陆后可查看
              </p>
            </div>

            <div class="package-item3"></div>
            <div>
              <span class="e">银行卡</span>
              <p
                style="
                  color: rgb(129, 118, 118);
                  font-size: 15px;
                  position: absolute;
                  top: 96px;
                  left: 300px;
                "
              >
                未绑定
              </p>
            </div>
          </div>
        </div>
        <div class="user-title">
          <span>我的订单</span>
        </div>
        <div class="user-order">
          <div class="user-order-item1"></div>
          <div class="d2">
            <p><router-link to="/orderlist" style="color:#000" >旧机回收</router-link></p>
          </div>
          <div class="user-order-item2"></div>
          <div class="d3" @click="gotojiu"><p>以旧换新</p></div>
          <div class="user-order-item3"></div>
          <div class="d4" @click="gotoershou"><p>二手良品</p></div>
        </div>
        <div class="user-menu">
          <div class="menu-item1" @click="gotoquestion">
            <img src="\img\index\下载 (1).png" /><span>常见问题</span>
          </div>
          <div class="menu-item2">
            <img src="\img\index\下载 (2).png" /><span>邮箱地址</span>
          </div>
          <div class="menu-item3">
            <img src="\img\index\下载.png" /><span>关于我们</span>
          </div>
          <div class="menu-item4">
            <img src="\img\index\20201229174806_5775.png" /><span>客服电话</span
            ><span>0755-33528888</span>
          </div>
        </div>
        <div class="wei">
          <div>
            <img src="img\index\20200914092418_8794.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
* {
  margin: 0px;
  padding: 0px;
  // background-color: #f6f6f6;
}
.index {
  .laoda {
    margin-bottom: 50px;
  }
  .m-t {
    margin-top: 40px;
  }
  .icon-bg {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("/img/index/20200413104656_7617.png") no-repeat;
    background-size: 25rem;
  }
  .icbg1 {
    background-position: 0px 0;
  }
  .icbg2 {
    background-position: -122px 0;
  }
  .icbg3 {
    background-position: -254px 0;
  }
  .icbg4 {
    background-position: -376px 0;
  }
  .active-ic1 {
    background-position: 0px -40px;
  }
  .active-ic2 {
    background-position: -122px -40px;
  }
  .active-ic3 {
    background-position: -254px -40px;
  }
  .active-ic4 {
    background-position: -376px -40px;
  }
  .d1 {
    color: black;
    font-size: 20px;
    background: white;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 8;
    // border-bottom: red 3px solid;
  }
  .laoda {
    background-color: #f6f6f6;
  }
  .topbox {
    // display: flex;
    position: relative;
    width: 100%;
    height: 235px;
    border: solid 1px solid;
    // background: red;
  }
  .box {
    width: 100%;
    height: 90px;
    // background: rgb(24, 118, 141);
    display: flex;
    margin: 0.49067rem auto;
    background-color: rgb(255, 255, 255);
  }
  .span {
    font-size: 20px;
    font-family: PingFang;
    display: block;
    font-weight: 500px;
    margin-top: 15px;
    margin-left: 15px;
  }
  .span1 {
    margin-top: 15px;
    margin-left: 15px;
    font-size: 20px;
    font-family: PingFang;
    color: rgb(129, 118, 118);
    display: block;
  }
  .package {
    display: flex;
    width: 100%;
    height: 100px;
    // background: rgba(186, 211, 118, 0.87);
    // padding: 0px 21px;
    text-align: center;
    position: relative;
    display: block;
  }
  .package-item1 {
    width: 150px;
    height: 100px;
    // margin-right: 20px;
    // text-align: center;
    background: green;
    // border: grey 1px solid;
    background: url(/img/index/20200320151901_9489.png) no-repeat -145px 31px;
    transform: scale(0.6);
    position: absolute;
    // left: 200px;
    // top: -20px;
  }
  .package-item2 {
    width: 150px;
    height: 100px;
    margin-right: 30px;
    // text-align: center;
    background: green;
    // border: grey 1px solid;
    background: url(/img/index/20200320151901_9489.png) no-repeat -385px 31px;
    transform: scale(0.6);
    position: absolute;
    left: 120px;
    // top: -20px;
  }
  .package-item3 {
    width: 150px;
    height: 100px;
    margin-right: 30px;
    // text-align: center;
    background: green;
    // border: grey 1px solid;
    background: url(/img/index/20200320151901_9489.png) no-repeat -610px 31px;
    transform: scale(0.6);
    position: absolute;
    left: 250px;
    top: 0px;
  }
  .q {
    // border: black 1px solid;
    width: 100px;
    height: 50px;
    line-height: 25px;
    position: absolute;
    left: 25px;
    top: 70px;
  }
  .w {
    // border: black 1px solid;
    width: 100px;
    height: 50px;
    position: absolute;
    line-height: 25px;
    top: 70px;
    left: 145px;
  }
  .e {
    // border: black 1px solid;
    width: 80px;
    height: 50px;
    position: absolute;
    line-height: 25px;
    top: 70px;
    left: 285px;
  }
  .user-order {
    width: 95%;
    height: 130px;
    // background-color: blueviolet;
    // border: blueviolet 1px solid;
    display: flex;
    text-align: center;
    position: relative;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 0 auto;
  }
  .user-title {
    padding-left: 30px;
    background-color: rgb(255, 255, 255);
    color: #333;
    font-size: 20px;
    margin-top: 10px;
  }
  .user-order-item1 {
    width: 100px;
    height: 100px;
    // background-color: rosybrown;
    // border: red 1px solid;
    background: url(/img/index/20200320151901_9489.png) no-repeat -165px -112px;
    transform: scale(0.8);
    margin-left: 25px;
  }
  .user-order-item2 {
    width: 100px;
    height: 100px;
    // background-color: rosybrown;
    // border: red 1px solid;
    background: url(/img/index/20200320151901_9489.png) no-repeat -393px -112px;
    transform: scale(0.8);
    // margin-right: 25px;
    margin-left: 15px;
  }
  .user-order-item3 {
    width: 100px;
    height: 100px;
    // background-color: rosybrown;
    // border: red 1px solid;
    background: url(/img/index/20200320151901_9489.png) no-repeat -624px -112px;
    transform: scale(0.8);
    // margin-right: 25px;
    margin-left: 25px;
  }
  .d2 {
    width: 100px;
    height: 20px;
    // border: green 3px solid;
    position: absolute;
    top: 80px;
    left: 20px;
  }
  .d3 {
    width: 100px;
    height: 20px;
    // border: green 3px solid;
    position: absolute;
    top: 80px;
    left: 140px;
  }
  .d4 {
    width: 80px;
    height: 20px;
    // border: green 3px solid;
    position: absolute;
    top: 80px;
    left: 280px;
  }
  .user-menu {
    width: 100%;
    height: 250px;
    background-color: #f1e8e8;
    display: flex;
    flex-direction: column;
  }
  .menu-item1 {
    width: 355px;
    height: 40px;
    background-color: rgb(255, 255, 255);
    margin-top: 10px;
    margin-bottom: 6px;
    margin-left: 3px;
    border-radius: 5px;
    padding: 13px 0px 0px 15px;
  }
  .menu-item1 img {
    vertical-align: middle;
    width: 35px;
    height: 20px;
    padding: 0px 10px 0px 0px;
  }
  .menu-item2 {
    width: 355px;
    height: 40px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 6px;
    margin-left: 3px;
    border-radius: 5px;
    padding: 20px 0px 0px 15px;
  }
  .menu-item2 img {
    vertical-align: middle;
    width: 35px;
    height: 20px;
    padding: 0px 10px 0px 0px;
  }
  .menu-item3 {
    width: 355px;
    height: 40px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 6px;
    margin-left: 3px;
    border-radius: 5px;
    padding: 13px 0px 0px 15px;
  }
  .menu-item3 img {
    vertical-align: middle;
    width: 35px;
    height: 20px;
    padding: 0px 10px 0px 0px;
  }
  .menu-item4 {
    height: 40px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 6px;
    margin-left: 3px;
    border-radius: 5px;
    padding: 13px 0px 0px 15px;
  }
  .menu-item4 span {
    margin-right: 70px;
  }
  .menu-item4 img {
    vertical-align: middle;
    width: 35x;
    height: 20px;
    padding: 0px 10px 0px 0px;
  }
  .wei {
    width: 100%;
    height: 140px;
    // border: rgb(105, 12, 12) 1px solid;
  }
  .wei img {
    width: 100%;
    height: 120px;
  }
}
</style>
<script>
import { MessageBox } from "mint-ui";
export default {
  data() {
    return {
      username: "",
      selected: "index",
      // 是否登录
      isLogin: true,
      ying:true
    };
  },
  methods: {
    logout() {
      this.$messagebox({
        message: "确认退出?",
        showCancelButton: true,
      }).then((action) => {
       if (action=="confirm") {
         sessionStorage.removeItem("username");
         sessionStorage.removeItem("uid");
         sessionStorage.removeItem("oldprotitle");
         sessionStorage.removeItem("oldproprice");
         this.isLogin = true;
       }
      });
    },
    goto(){
      this.$router.push('/cash')
    },
    go(){
      this.$router.push('/coupon')
    },
    gotoquestion(){
      this.$router.push('/question')
    },
    gotoershou(){
      this.$router.push('/Assistant')
    },
    gotojiu(){
      this.$router.push('/renewindex/renew')
    }
  },
  watch: {
    selected(newVal) {
      if (newVal == "index") {
        this.$router.push("/index");
      } else if (newVal == "renew") {
        this.$router.push("/renew");
      } else if (newVal == "recycle") {
        this.$router.push("/recycle");
      } else if (newVal == "aboutMe") {
        this.$router.push("/aboutMe");
      }
    },
  },
  mounted() {
    this.username = sessionStorage.getItem("username");
    if (this.username) {
      this.isLogin = false;
    } else {
      this.isLogin = true;
    }
    
  },
  updated(){
    if(sessionStorage.username){
      this.ying=false;
    }else{
      this.ying=true
    }
  }
};
</script>

